<script lang="ts" setup>
import { Ref, render } from 'vue'
import { merge } from 'lodash-es'
import { useECharts } from '../hooks/useECharts'
import type { LineSeriesOption, EChartsOption } from 'echarts'

const props = defineProps<{
  /** 图表数据 */
  data: LineSeriesOption['data']
  /** 是否自定义tooltip */
  isDiyToolTip?: boolean
  /** y轴单位 */
  yUnit?: string
  /** 配置项 */
  options?: EChartsOption
}>()
const slots = defineSlots<{
  tooltip(index: number, params: any): any
}>()

/** 容器 */
const chartRef = ref<HTMLDivElement | null>(null)
/** 实例方法 */
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
/** 计时器 */
let timer = shallowRef(0)

watchEffect(() => {
  /** 无数据则不绘制 */
  if (!props.data?.length) return

  /** 基本配置(在项目中使用时，修改成统一样式风格) */
  let basicOptions = {
    color: ['#0A59FF'],
    darkMode: true,
    grid: {
      top: 46,
      bottom: 30,
      left: 38,
      right: 0
      // containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      className: !props.isDiyToolTip ? 'basicChartTooltip' : '',
      formatter(params: any) {
        /** 自定义弹窗 */
        if (props.isDiyToolTip) {
          const div = document.createElement('div')
          render(slots?.tooltip(params?.[0]?.dataIndex, params)?.[0], div)
          return div
        }
        console.log(params), 'params'
        /** 默认弹窗 */
        let text = `${params[0].name}<br>`
        params.forEach((k: any) => {
          text += `${k.marker}${k.seriesName}：${k.value}${props.yUnit || ''}<br>`
        })
        // ${params[0].marker}${params[0].value}${props.yUnit || ''}<br>
        return text
      }
    },
    xAxis: {
      type: 'category',
      data: props.data.map((k: any) => k.name),
      axisLine: {
        type: 'line',
        lineStyle: {
          color: '#eee'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#999999',
        fontSize: '14'
      }
    },
    yAxis: {
      name: `单位 / ${props.yUnit || ''}`,
      nameTextStyle: {
        color: '#999999', // 设置 Y 轴名称颜色
        padding: [0, 0, 0, -16]
      },
      type: 'value',
      splitLine: {
        show: true, // 显示分隔线
        lineStyle: {
          type: 'dashed', // 设置分隔线为虚线
          color: 'rgba(153, 153, 153, 0.2)', // 设置分隔线颜色
          width: 1 // 设置分隔线宽度
        }
      },
      axisLine: {
        lineStyle: {
          color: '#eee' // 设置 y 轴颜色
        }
      },
      axisLabel: {
        color: '#999999',
        formatter: '{value} '
      }
    },
    series: [
      {
        data: props.data,
        type: 'line',
        symbolSize: 5,
        areaStyle: {
          color: 'rgba(141,194,255,0.4)'
        }
      }
    ]
  } as EChartsOption

  /** 有传入的配置，则使用一个深度递归合并的配置 */
  if (props.options) {
    const { options } = props
    basicOptions = merge(basicOptions, options)
  }

  /** 绘制 */
  setOptions(basicOptions)
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = 0
  }
})
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

<style lang="less">
.basicChartTooltip {
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;
  min-width: 90px !important;
}
</style>
